﻿<!DOCTYPE html>
<html>
<head>
    <title>SocketIO4Net.Client</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
    <div id="container">
        <div class="header">
            <h3>
                Client Events Sample</h3>
            <div>
                <div class="content">
                    <textarea id="textArea1" cols="80" rows="25" title="Debug Messages"></textarea>
                </div>
                <div class="footer">
                    <button type="button" onclick='clearTextArea();'>
                        Clear</button>
                </div>
            </div>
        </div>
    </div>
    <script src='/socket.io/socket.io.js' type='text/javascript'></script>
    <script src='http://code.jquery.com/jquery-1.7.1.min.js' type="text/javascript"></script>
    <script>
$(document).ready(function () {

    var socket = io.connect(); // default connection url to current page

    socket.on('connect', function () {
        showMessage('client is connected');
        showMessage('sending [root].[partInfo] to server');
        socket.emit('partInfo', { PartNumber: '1234', Code: 'C', Level: 1 });
    });
    socket.on('update', function (data) {
        showMessage('recv [root].[update] : ', data);
    });
    socket.on('event', function (eventLog) {
        showMessage('Arghhh - should not have received this message matey!');
        showMessage('recv [root].[event]', eventLog);
    });
    socket.on('clientdisconnected', function () {
        showMessage('recv [root].[userdisconnected]');
    });

    // *****************************************
    // *************  logger namespace ***********
    // *****************************************
    var logger = io.connect('/logger'); // namespace 'logger'

    logger.on('connect', function () {
        showMessage('client is connected namespace [logger]');
    });
    logger.on('event', function (eventLog) {
        showMessage('recv [logger].[event] : ', eventLog);
    });
});

        function clearTextArea() {
            $('#textArea1').val("");
        }

        function showMessage(label, data) {
            if (data === undefined)
                $('#textArea1').append(label + '\r\n');
            else
                $('#textArea1').append(label + JSON.stringify(data) + '\r\n');
            $().log(label, data);
        }
        // log helper - in particular when IE does not have console showing
        $.fn.log = function (msg, data) {
            if (window.console && window.console.log) {
                if (data === undefined)
                    window.console.log(msg);
                else
                    window.console.log(msg + '  ' + JSON.stringify(data));
            }
            return this;
        }
            
    </script>
</body>
</html>
